<template>
    <treeselect
            v-bind:value="value"
            v-on:input="value => $emit('input', value)"
            :clearable="clearable"
            :disabled="disabled"
            :multiple="multiple"
            :placeholder="placeholder?placeholder:'请选择'"
            :searchable="searchable"
            :options="options"
            :normalizer="normalizer"
            :disable-branch-nodes="disableBranchNodes"
            @select="treeselect"
            v-bind="$attrs"
            :appendToBody="appendToBody"
            :value-consists-of="valueConsistsOf"
            :limitText="limitTextEvent"
            :limit="1"
            v-on="$listeners"
    >
    </treeselect>
</template>

<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        components: {Treeselect},
        data() {
            return {
            }
        },
        props: {
            disabled: Boolean,
            clearable: Boolean,//是否显示重置值的“×”按钮,Default：true
            multiple: Boolean, //是否开启多选，Default: false
            searchable: Boolean, // 是否启用搜索功能,Default: false
            disableBranchNodes: Boolean,//是否阻止选择分支节点,Default：false
            placeholder: String,
            value: {
                type: [String, Number, Array, Object],
                default: null
            },
            valueConsistsOf:{
                type: String,
                default: 'ALL'
            },
            normalizer: { // 用于规范化源数据
                type: Function,
                default: function () {
                    return '';
                }
            },
            options: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            appendToBody:{
                type: Boolean,
                default: false
            }
        },
        methods: {
            treeselect(node, instanceId) {
                this.$emit('treeselect', node, instanceId)
            },
            limitTextEvent(count){
//              return `${count} 个`;
                return `...`;
            }
        }
    }
</script>
